import React, { memo } from 'react';
import { useUpdate } from 'ahooks';
import styles from './test_child_refresh.css';

// 测试当父渲染时，子组件 props 不变的情况下，子组件是否会重新渲染
// 直接 FC 会重新渲染，而 memo(FC) 不会重新渲染
// 如果参数变了，memo(FC) 也会重新渲染

function Child(props: any) {
  console.log('rendering Child', props.id);
  return <div>{JSON.stringify(props)}</div>;
}

const ChildMemo = memo(Child);

export default function() {
  const update = useUpdate();
  return (
    <div className={styles.normal}>
      <h1 onClick={update}>Page test_child_refresh</h1>
      <Child id={1} />
      <ChildMemo id={2} />
      <ChildMemo id={3} rand={Math.random()} />
    </div>
  );
}
